<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="back" @click="back"><uni-icons type="back" color="#fff" size="20"></uni-icons></view>
		<!-- #endif -->
		<image class="bg" :src="movie.pic"></image>
		<view class="box">
			<image class="box_pic" :src="movie.pic"></image>
			<view class="box_text">
				<view class="box_text_name">{{ movie.name }}</view>
				<view class="box_text_score">
					评分:
					<text class="box_text_score_num">{{ movie.grade }}</text>
				</view>
				<view class="box_text_type">{{ movie.filmTypes }}</view>
				<view class="box_text_actor">{{ movie.cast }}</view>
				<view class="box_text_intro">{{ movie.intro }}</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn_buy" @click="buyBtn">立即购票</view>
			<view class="btn_share">
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn_share_btn" open-type="share">分享好友</button>
				<!-- #endif -->
				<text>分享好友</text>
			</view>
		</view>
	</view>
</template>

<script>
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			// 电影详情
			movie: {},
			filmId: ''
		};
	},
	onShareAppMessage(res) {
		return {
			title: this.movie.name + '电影票限时六折!',
			path: '/pages/movie_info/movie_info?filmId='+ this.filmId + '&uid='+uni.getStorageSync('userInfo').uid,
			imageUrl: 'https://movie666.oss-cn-beijing.aliyuncs.com/share/1.png',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	async onLoad(e) {
		this.filmId = e.filmId;
		this.getMovieInfo(e.filmId);
		let time = setTimeout(() => {
			clearTimeout(time);
			uni.showToast({
				icon: 'none',
				duration:3333,
				title: '分享好友下单立得1~8元红包'
			});
		}, 1000)
	},

	methods: {
		// 获取电影数据
		async getMovieInfo(e) {
			let res = await Route.movie_info({ filmId: e });
			this.movie = res.info;
		},
		// 返回
		back() {
			uni.navigateBack();
		},
		// 购票
		buyBtn() {
			let data = {
				filmId: this.movie.filmId,
				pic: this.movie.pic,
				name: this.movie.name,
				grade: this.movie.grade,
				filmTypes: this.movie.filmTypes,
				cast: this.movie.cast,
				publishDate: this.movie.publishDate
			};

			uni.navigateTo({
				url: '../movie/movie?data=' + JSON.stringify(data)
			});
		}
	}
};
</script>

<style lang="scss">
.back {
	position: absolute;
	z-index: 2;
	left: 10rpx;
	top: 10rpx;
	padding: 10rpx 20rpx;
}
.bg {
	position: fixed;
	top: 0;
	z-index: 0;
	height: 100vh;
	width: 100vw;
	-webkit-filter: blur(49rpx);
	-moz-filter: blur(49rpx);
	-o-filter: blur(49rpx);
	-ms-filter: blur(49rpx);
	filter: blur(49rpx);
}
.box {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;

	&_pic {
		z-index: 1;
		width: 500rpx;
		height: 701rpx;
		border-radius: 11rpx;
	}
	&_text {
		z-index: 1;
		width: 630rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		font-size: $uni-font-size-base;
		color: $uni-text-color-inverse;
		margin-top: 33rpx;
		margin-bottom: 108rpx;
		&_name {
			text-align: center;
			font-size: 49rpx;
			font-weight: 600;
		}
		&_score {
			text-align: center;
			margin-top: 13rpx;
			&_num {
				font-size: $uni-font-size-lg;
				color: $template-background;
			}
		}
		&_type {
			text-align: center;
		}
		&_actor {
			text-align: center;
		}
	}
}
// 空列表
.empty {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	background: #fff;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&_img {
		width: 386rpx;
		height: 282rpx;
	}
	&_text {
		margin-top: 8rpx;
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
	}
}
.btn {
	position: fixed;
	color: #fff;
	z-index: 9;
	right: 0;
	left: 0;
	bottom: 49rpx;
	margin: auto;
	display: flex;
	justify-content: space-around;
	&_buy{
		width: 333rpx;
		height: 81rpx;
		text-align: center;
		line-height: 81rpx;
		background: #f9ba37;
		font-size: $uni-font-size-lg;
		border-radius: 49rpx;
	}
	&_share{
		position: relative;
		width: 333rpx;
		height: 81rpx;
		text-align: center;
		line-height: 81rpx;
		background: #f9ba37;
		font-size: $uni-font-size-lg;
		border-radius: 49rpx;
		&_btn{
			position: absolute;
			opacity: 0;
		}
	}
}
</style>
